<template>
  <div class="NewsList_box">
    <ul class="mui-table-view">
        <router-link tag="li"  :to="'/home/newsList/'+item.id" class="mui-table-view-cell mui-media" v-for="item in newsList" :key='item.id'>
            <a href="javascript:;">
                <img class="mui-media-object mui-pull-left" :src="item.img_url">
                <div class="mui-media-body">
                    <h3>{{item.title}}</h3>
                    <p class='mui-ellipsis'>
                        <span>发表时间:{{item.add_time | timeL}}</span>
                        <span>点击{{item.click}}次 </span>
                    </p>
                </div>
            </a>
        </router-link>
        
    </ul>
  </div>
</template>
<script>
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      newsList:[],
    }
  },
  created(){
      this.getList()
  },
  methods:{
      getList(){
          this.$http.get('api/getnewslist').then(res=>{
              if(res.body.status===0){
                  this.newsList=res.body.message;
              }else{
                  Toast("获取新闻列表失败！");
              }
          })
      }
  }
}
</script>
<style lang="scss" scoped>
  .NewsList_box{
      .mui-media-body{
          h3{
              font-size: 14px;
          }
          p{
              color: #26a2ff;
              font-size: 12px ;
              display: flex;
              justify-content:space-between;
          }
      }
  }
</style>